import { View } from "@tarojs/components"
import Taro, { useDidShow, useReachBottom, useRouter } from "@tarojs/taro"
import { useSetState, useUpdateEffect } from "ahooks"

import ByTag from "@/components/ui/ByTag"
import ByRow from "@/components/ui/ByRow"
import Card from "@/components/common/Card"
import Page from "@/components/common/Page"
import ByTabs from "@/components/ui/ByTabs"
import ByText from "@/components/ui/ByText"
import Moment from "@/components/app/Moment"
import UserItem from "@/components/app/UserItem"

import useEnum from "@/hooks/useEnum"
import useList from "@/hooks/useList"
import ListView from "@/components/app/ListView"
import ApiInspection from "@/api/inspection"
import ByCol from "@/components/ui/ByCol"
const tabs = [
  { label: "待整改", value: 1 },
  { label: "已整改", value: 2 },
]

const statusOptions = [
  { label: "待审核", value: 1, color: "warning" },
  { label: "已通过", value: 2, color: "success" },
  { label: "已驳回", value: 3, color: "error" },
]

export default () => {

  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId)

  //type：1 整改 2 审核；typeStatus： 对应 待xx，已XX
  const [search, setSearch] = useSetState({ type: 1, typeStatus: 1, intentCustomerId })
  const { loading, list, nextPage, resetToFirst } = useList<any>(ApiInspection.rectificationList, { manual: true, defaultParams: [search] })

  const { getOption } = useEnum(statusOptions);

  useReachBottom(() => nextPage())
  useUpdateEffect(() => resetToFirst(search), [search])
  useDidShow(() => resetToFirst(search))

  // feedbackDate
  // getTimeDiffFromNow(date);


  const getTagConfig = (data) => {
    const daily = !!data.dailyInspectionDetail
    return { color: daily ? "primary" : 'warning', text: daily ? "日常" : "标准" } as const
  }

  return (
    <>
      <Page slotHeader={
        <View className="px-3 pb-3 bg-white">
          <ByTabs capsule tabs={tabs} active={search.typeStatus} onChange={typeStatus => setSearch({ typeStatus })} />
        </View>
      }>

        <ListView loading={loading} isEmpty={list.length === 0}>
          {
            list.map((item) => (
              <Card className="m-3" key={item.rectificationId} onClick={() => Taro.navigateTo({ url: `rectificationDetail?intentCustomerId=${intentCustomerId}&rectificationId=${item.rectificationId}` })}>
                <ByRow content="between">

                  <View>
                    <ByTag size="small" className="mr-1" type={getTagConfig(item).color}>{getTagConfig(item).text}</ByTag>
                    <ByText>{item.dailyInspectionDetail?.type || item.quesNaireContent?.quesName}</ByText>
                  </View>

                  {
                    search.typeStatus === 2 &&
                    <ByCol span={"none"}>
                      <ByText type={getOption(item.status, 'color')}>{getOption(item.status, 'label')}</ByText>
                    </ByCol>
                  }
                </ByRow>

                <ByText block type="second" className="my-2">问题内容：{item.failedContent || "-"}</ByText>

                <ByRow content="between" align="center">
                  <UserItem name={item.createUserName} />

                  <ByText type="third" size="sm">
                    要求整改:
                    {item.requaireProcessDate}
                  </ByText>
                </ByRow>
              </Card>
            ))
          }
        </ListView>

      </Page>
    </>
  )
}
